<template>
  <div class="m-1">
    <custom-title :is-line="true" title="基本信息" />
    <div class="companyListDetailsBaseInfo">
      <div v-for="(item, index) in descList" :key="index + 'base'">
        <custom-details-item :icon="item.icon" :label="item.label" :value="item.value">
          <template #valueSlot>
            <span>{{ item.value === '-'?'/':item.value }}</span>
          </template>
        </custom-details-item>
      </div>
    </div>
    <div class="d-flex mt-2 w-100">
      <custom-radio-tag1 class="mb-1 w-100" :list="list" check-value="隐患台账" is-scroll @change="tagChange" />
    </div>
    <template v-if="active === '排查隐患清单'">
      <el-alert v-if="numForm['隐患总数'] !== undefined" :title="'本次共排查出隐患' + numForm['隐患总数'] + '个，审核通过'+numForm['审核通过数量']+'个，其中重大隐患' + numForm['重大隐患'] + '个，一般隐患' + numForm['一般隐患'] + '个。'" type="warning" class="mb-1" :closable="false" />
      <div class="listInner">
        <div class="common_list">
          <div v-for="(item, index) in listData" :key="index" class="list_item">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  {{ item.companyName }}
                  <van-tag plain :type="'primary'" class="text-center" style="width: 2rem; display: block"> {{ item.auditResult }}</van-tag>
                </div>
                <ul>
                  <li>
                    <i class="iconfont c-text-color1">&#xe6aa;</i>
                    <div class="label">隐患类别：</div>
                    <div class="value">{{ item.dangersType||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color2">&#xe87e;</i>
                    <div class="label">隐患位置：</div>
                    <div class="value">{{ item.position||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe87e;</i>
                    <div class="label">隐患等级：</div>
                    <div class="value">{{ item.dangersLevel||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color4">&#xe611;</i>
                    <div class="label">隐患描述：</div>
                    <div class="value">{{ item.describe ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color5">&#xe67a;</i>
                    <div class="label">检查依据：</div>
                    <div class="value">{{ item.checkBasis ||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color6">&#xe685;</i>
                    <div class="label">检查时间：</div>
                    <div class="value">{{ item.checkTime||'/' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color7">&#xe700;</i>
                    <div class="label">检查人员：</div>
                    <div class="value">{{ item.checkPerson||'/' }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="formInline.pageNum" :pages="pages" @load="handlePages" />
    </template>
    <template v-if="active === '企业检查得分'">
      <div class="van-collapse-setStyle companyScore">
        <van-collapse v-if="infoData && infoData.length>0" v-model="activeNames">
          <van-collapse-item v-for="(item, index) in infoData" :key="index" :title="(index + 1) + '、' + item.label" :name="item.label">
            <div class="listInner">
              <div class="common_list">
                <div v-for="(items, indes) in item.cont" :key="items.oneElement + indes" class="list_item">
                  <div class="content_area">
                    <div class="right_content">
                      <div class="content_title" style="max-width: 100%">
                        {{ items.twoElement !== '' ? items.twoElement + '-' + items.threeElement : '/-' + items.threeElement }}
                      </div>
                      <ul>
                        <li>
                          <div class="label">检查事项：</div>
                          <div class="value allowWrap">{{ items.checkContent||'/' }}</div>
                        </li>
                        <li>
                          <div class="label">标准分：</div>
                          <div class="value allowWrap">{{ items.standardScore||'/' }}</div>
                        </li>
                        <li>
                          <div class="label">评分标准：</div>
                          <div class="value allowWrap">{{ items.gradStandards ||'/' }}</div>
                        </li>
                        <li>
                          <div class="label">检查依据：</div>
                          <div class="value allowWrap">{{ items.checkGist||'/' }}</div>
                        </li>
                        <li>
                          <div class="label">重要程度：</div>
                          <div class="value allowWrap">{{ items.checkWay||'/' }}</div>
                        </li>
                        <li>
                          <div class="label">检查结果：</div>
                          <div class="value allowWrap">{{ items.checkResult ||'/' }}</div>
                        </li>
                        <li>
                          <div class="label">评分专家：</div>
                          <div class="value allowWrap">{{ items.expertName||'/' }}</div>
                        </li>
                        <li>
                          <div class="label">涉及标准项分值：</div>
                          <div class="value allowWrap">{{ items.referStandardScore||'/' }}</div>
                        </li>
                        <li>
                          <div class="label">得分：</div>
                          <div class="value allowWrap">{{ items.score ||'/' }}</div>
                        </li>
                        <li>
                          <div class="label">资料：</div>
                          <div class="value">
                            <el-link type="primary" @click="openAttachPopUp(items.files)">查看</el-link>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
        <el-empty v-else />
      </div>
    </template>
    <attachPopUp ref="attachPopUp" />

  </div>
</template>
<script>
import _ from 'lodash'
import commonList from '@/assets/mixin/commonList'
import { dangersLedgerByCompany, checkCompanyDetails, checkCompanyContentScore } from '@/api/commonPage/dangerTreatment'
import AttachPopUp from '@/components/globals/attachPopUp.vue'
export default {
  components: { AttachPopUp },
  mixins: [commonList],
  props: {
    checkCompany: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      active: '排查隐患清单',
      activeNames: [],
      formInline: {
        pageNum: 1,
        pageSize: 10,
        checkTaskId: this.$route.query.checkTaskId,
        companyId: '',
        moduleName: ''
      },
      pages: 0,
      listData: [],
      numForm: {},
      descList: [
        { field: 'companyName', label: '企业名称', icon: '&#xe62c;', value: '重庆大江工业有限责任公司' },
        { field: 'expertName', label: '检查人员', icon: '&#xe700;', value: '张小军；毛小勇' },
        { field: 'scoreTime', label: '评分时间', icon: '&#xe685;', value: '2023-01-09' },
        { field: '隐患总数', label: '排查隐患数量', icon: '&#xe696;', value: '18' },
        { field: 'score', label: '检查得分', icon: '&#xe873;', value: '95' },
        { field: 'mark', label: '企业评分', icon: '&#xe6aa;', value: 'A+' }
      ],
      list: [
        {
          label: '排查隐患清单'
        },
        {
          label: '企业检查得分'
        }
      ],
      infoData: []
    }
  },
  computed: {
  },
  mounted() {
    this.$nextTick(() => {
      this.dangersLedgerByCompany()
      this.checkCompanyDetails()
    })
  },
  methods: {
    // 企业检查详情(隐患数量)
    async dangersLedgerByCompany() {
      this.layout.showAreaLoading(['.companyListDetailsBaseInfo'])
      const { status, data } = await dangersLedgerByCompany({
        checkTaskId: this.$route.query.checkTaskId,
        companyId: this.checkCompany.companyId,
        moduleName: this.checkCompany.moduleName
      })
      if (status === 0 && data) {
        const obj = {}
        data.forEach((x) => {
          obj[x.typename] = x.coalesce
        })
        this.numForm = obj
        this.descList.forEach(v => {
          if (v.field === 'checkPersonList' || v.field === 'checkTaskAttachList') {
            v.value = this.checkCompany[v.field] ? this.checkCompany[v.field] : []
          } else if (v.field === '隐患总数') {
            v.value = obj['隐患总数'] ? obj['隐患总数'] : '0'
          } else {
            v.value = this.checkCompany[v.field] ? this.checkCompany[v.field] : '/'
          }
        })
      }
      this.layout.hideAreaLoading(['.companyListDetailsBaseInfo'])
    },
    // 企业检查详情(排查隐患清单)
    async checkCompanyDetails() {
      this.$refs.customLoadmore.loadStatus = true
      this.formInline.companyId = this.checkCompany.companyId
      this.formInline.moduleName = this.checkCompany.moduleName
      const { status, data } = await checkCompanyDetails(this.formInline)
      if (status === 0 && data) {
        this.listData = data.list
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
    },
    // 企业检查详情(企业检查得分)
    async checkCompanyContentScore() {
      this.layout.showAreaLoading(['.companyScore'])
      const { status, data } = await checkCompanyContentScore({
        checkTaskId: this.$route.query.checkTaskId,
        companyId: this.checkCompany.companyId,
        moduleName: this.checkCompany.moduleName
      })
      if (status === 0 && data) {
        const oneElement = _.uniq(data.map(x => {
          return x.oneElement
        }))
        this.infoData = oneElement.map(x => {
          return {
            label: x,
            cont: data.filter(z => { return z.oneElement === x })
          }
        })
        this.activeNames = this.infoData.length ? [this.infoData[0].label] : []
      }
      this.layout.hideAreaLoading(['.companyScore'])
    },
    // 切换tag标签
    tagChange(tagArg) {
      const { label } = tagArg.item
      this.active = label
      console.log(label)
      if (label === '企业检查得分') {
        this.$nextTick(this.checkCompanyContentScore)
      } else {
        this.formInline.pageNum = 1
        this.$nextTick(() => {
          this.checkCompanyDetails()
        })
      }
    },
    // 分页
    handlePages(value) {
      this.formInline.pageNum = value
      this.checkCompanyDetails()
    }
  }
}
</script>
<style scoped>

</style>
